<template>
  <div class="sys_login">
    <div class="login_window">
      <div class="sign_logo">
        <img src="@/assets/images/system/logo.png" alt="" />
        <span title="校园共享单车管理系统">校园共享单车管理系统</span>
      </div>
      <div class="login_content">
        <div class="login_head">
          <div class="login_title">
            <h2 class="title">欢迎登录</h2>
          </div>
        </div>
        <div class="login_body">
          <el-form
            ref="validateForm"
            :rules="rules"
            :model="form"
            label-width="0px"
          >
            <el-form-item label="" prop="account">
              <el-input
                placeholder="请输入账号"
                prefix-icon="el-icon-user"
                v-model.number.trim="form.account"
              ></el-input>
            </el-form-item>
            <el-form-item label="" prop="password">
              <el-input
                placeholder="请输入密码"
                prefix-icon="el-icon-key"
                type="password"
                v-model.trim="form.password"
              ></el-input>
            </el-form-item>
            <el-form-item class="login_btns">
              <el-button
                :loading="loading"
                type="primary"
                @click="submitForm('validateForm')"
                >登录</el-button
              >
              <el-button @click="resetForm('validateForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from "@/service/login";
export default {
  name: "SystemLogin",
  data() {
    return {
      form: {
        account: "",
        password: "",
      },
      loading: false,
      rules: {
        account: [
          {
            required: true,
            message: "请输入账号",
            trigger: ["blur", "change"],
          },
          {
            type: "number",
            message: "账号必须为纯数字",
          },
          {
            pattern: /^[0-9]{8,12}$/,
            message: "账号长度在8-12之间",
            trigger: ["blur", "change"],
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: ["blur", "change"],
          },
          {
            pattern: /^[a-zA-Z0-9_]{8,12}$/,
            message: "密码只能由字母、数字、下划线组成，长度在8-12之间",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.loading = true;
          const res = await login(this.form);
          this.loading = false;
          const { status, data } = res;
          if (status === 200) {
            sessionStorage.setItem("bike_token", data.token);
            this.$message.success("登录成功");
            this.$router.push({
              path: "/sys",
            });
          } else {
            this.$message.warning("登录失败");
          }
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped lang="scss">
.sys_login {
  width: 100%;
  height: 100%;
  background: url("@/assets/images/system/system.jpg") no-repeat;
  background-size: cover;
  .login_window {
    position: relative;
    left: 10%;
    top: 50%;
    transform: translate(0, -50%);
    width: 488px;
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
    .sign_logo {
      display: flex;
      align-items: center;
      margin-bottom: 5%;
      text-align: center;
      justify-content: center;
      img {
        display: inline-block;
        vertical-align: middle;
        height: 42px;
        padding-right: 10px;
      }
      span {
        font-weight: 600;
        display: inline-block;
        vertical-align: middle;
        color: #4184e7;
        font-size: 32px;
        letter-spacing: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
  .login_content {
    width: 80%;
    height: 430px;
    margin: 0 auto;
    padding: 5% 5% 5%;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0 0 32px 0 rgba(65, 132, 231, 0.32);
    border-radius: 8px;
    .login_head {
      display: flex;
      justify-content: space-between;
      .login_title {
        width: 100%;
        margin-bottom: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title {
          font-weight: 600;
          font-size: 26px;
        }
      }
    }
    .login_body {
      width: 100%;
      .login_btns {
        width: 100%;
        ::v-deep .el-form-item__content {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
  }
}
</style>
